<template>
  <div class="rate-movie">
    <MyHeader></MyHeader>
    <div class="rate-content space-between">
      <div class="movie-desc">
        <h2 class="desc-module-title module-title">电影介绍</h2>
        <div class="desc-module-container ">
          <div class="cover-container ">
            <MyImage :url="movieInfo ? movieInfo!.movieCover : ''" :fs='20' fc='#00B7C3' :data="movieInfo ? movieInfo! : null"
              :date="router.currentRoute.value.query.date + ''"></MyImage>
          </div>
          <div class="desc-container ">
            <div><b>电影名称：</b>{{ movieInfo?.movieName ? movieInfo?.movieName : '未知' }}</div>
            <div><b>电影介绍：</b>{{ movieInfo?.movieDesc ? movieInfo?.movieDesc : '未知' }}</div>
            <div><b>电影类型：</b> {{ allTypes && movieInfo ? allTypes[movieInfo!.movieTypeId - 1].type : '未知' }}</div>
            <div><b>电影时长：</b> {{ movieInfo?.movieView ? movieInfo?.movieDuring : '未知' }}</div>
          </div>
          <div class="score-container ">
            <div><b>评分人数：</b> {{ movieInfo?.movieScoreNum ? movieInfo?.movieScoreNum : '未知' }}</div>
            <div><b>电影浏览量：</b> {{ movieInfo?.movieView ? movieInfo?.movieView : '未知' }}</div>
            <div><b>电影评分：</b>
              <el-rate show-score v-model="rateValue" disabled score-template="{value} 分" />
            </div>
          </div>
        </div>
      </div>
      <div class="movie-rate">
        <h2 class="rate-module-title module-title">选择排班</h2>
        <div class="rate-module-container">
          <!-- 选择日期 -->
          <el-date-picker v-model="time" placeholder="选择时间" size="large" style="margin-right: 20px;"
            :disabled-date="disabledDate" @change="handleChange" />
          <!-- 选择影院 -->
          <el-cascader v-model="res" :options="options" :props="props" size=large placeholder="选择排班">
          </el-cascader>
        </div>
      </div>
      <div class="opt-btn-group">
        <el-button type="primary" class="opt-btn-style" @click="buyTicket">去购票</el-button>
        <el-button type="primary" class="opt-btn-style" @click="rateMovie">去评价</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyHeader from '../../components/MyHeader2.vue'
import { ref } from 'vue'
import { addARecord } from '../../api/history'
import { getMovieById } from '../../api/movie'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { dayjs, ElMessage } from 'element-plus';
import MyImage from '../../components/MyImage.vue'
import { getCascaderOptionByMovie } from '../../api/schedule'

interface IHotMovie {
  movieCover: string
  movieDesc: string
  movieId: number
  movieName: string
  movieScore: number
  movieScoreNum: number
  movieTypeId: number
  movieView: number
  movieDuring: number
}


const allTypes = JSON.parse(window.sessionStorage.getItem("allTypes")!)
const cityname = JSON.parse(window.sessionStorage.getItem("location")!).cityname

const res = ref([])
let options = ref([])
let timeChanged = ref(false)
const router = useRouter();
const store = useStore();
const rateValue = ref(0)
let time:any = ref(router.currentRoute.value.query.date)
let movieInfo = ref<IHotMovie>()

const props = {
  expandTrigger: 'hover',
}

const handleChange = (value: any) => {
  timeChanged.value = true
  getCascaderOptionByMovie({ movieId: router.currentRoute.value.query.id, date: dayjs(value).format("YYYY-MM-DD"), cityname: cityname }).then((res: any) => {
    if (res.code == 200) {
      options.value = res.data
      console.log("影院详情 -> 获取级联信息", res.data);
    } else {
      ElMessage.error("影院详情 -> 获取级联信息失败")
    }
  })
}

const disabledDate = (time: Date) => {
  //禁止选择今天以前的时间和七天以后的
  return time.getTime() - Date.now() > 6 * 24 * 60 * 60 * 1000 || time.getTime() - Date.now() <= (-1) * 24 * 60 * 60 * 1000;
}

const buyTicket = () => {
  if (time.value != null && res.value.length >= 3) {
    router.push({
      path: '/ticket/buy',
      query: {
        date: timeChanged.value == true? dayjs(time.value).format("YYYY-MM-DD") : time.value,
        cinemaId: res.value[1],
        movieId: movieInfo.value!.movieId,
        scheduleId: res.value[2],
        orderId: -1
      }
    })
  } else {
    ElMessage.error("请先选择排班")
  }
}

const rateMovie = () => {
  router.push({
    path: '/rate',
    query: {
      movieId: router.currentRoute.value.query.id
    }
  })
}



getCascaderOptionByMovie({ movieId: router.currentRoute.value.query.id, date: router.currentRoute.value.query.date, cityname: cityname }).then((res: any) => {
  if (res.code == 200) {
    options.value = res.data
    console.log("影院详情 -> 获取级联信息", res.data);
  } else {
    ElMessage.error("影院详情 -> 获取级联信息失败")
  }
})

addARecord({
  movieId: router.currentRoute.value.query.id,
  userId: store.getters.currentUser.userId
})
  .then((res: any) => {
    if (res.code == 200) { }
    else {
      ElMessage.error(res.msg)
    }
  })

getMovieById({ movieId: router.currentRoute.value.query.id })  //router.currentRoute.value.query.id
  .then((res: any) => {
    // debugger
    if (res.code == 200) {
      movieInfo.value = res.data
      rateValue.value = res.data.movieScore
      console.log("电影页面 -> 获得电影信息", movieInfo.value)
    }
    else {
      ElMessage.error(res.msg)
    }
  })

</script>
<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}
</style>
<style lang='less' scoped>
@headerHeight: 82.8px;
@leftAndRight: 100px;
@bottomBarHeight: 75px;

.comment-user {
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  margin-right: 20px;
}

.comment-time {
  color: grey;
}

.comment-content {
  padding-left: 80px;
  color: black;
  width: 100%;
  word-break: break-all;
}

.desc-module-container,
.rate-module-container,
.comment-module-container {
  display: flex;
  position: relative;
  width: 100%;
}

.desc-module-container {
  justify-content: space-between;
  align-items: stretch;
}




.rate-movie {
  background-color: #efefef;
  position: relative;
  width: 100%;
  min-height: 100%;
}

.rate-content {
  padding: calc(@headerHeight + 20px) 0px 20px 0px;
  position: relative;
  // top: @headerHeight;
  flex-direction: column;
  width: calc(100% - 2 * @leftAndRight);
  // height: calc(100% - @headerHeight);
  margin: 0 auto;

  .opt-btn-group {
    width: 100%;
    display: flex;

    .opt-btn-style {
      flex: 1;
      height: 45px;
      font-size: 18px;
    }
  }

  .module-title {
    padding-bottom: 40px;
  }

  .desc-container,
  .score-container,
  .cover-container {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }



  .movie-desc,
  .movie-rate,
  .movie-comment {
    padding: 20px 40px;
  }

  .movie-desc {
    flex: 0 0 auto;
    position: relative;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 10px;
    border-left: 8px solid grey;
    width: 100%;

    margin-bottom: 20px;
  }

  .movie-rate {
    flex: 0 0 auto;
    position: relative;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 10px;
    border-left: 8px solid orange;
    width: 100%;
    margin-bottom: 20px;
  }

  .movie-comment {
    flex: 1 0 auto;
    position: relative;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 10px;
    border-left: 8px solid blue;
    width: 100%;
  }

  .rate-row {
    display: flex;
    width: 100%;
  }
}
</style>